<div id="multi-bar" id="carousel<?php echo $module; ?>">
<h3 class="title">Multi Media Bar</h3>
	<div id="multi" class="clearfix"><a id="left-multi"
		href="#">Previous</a> <a id="left-multi" href="#" Next></a>
		<div id="media-slides">
			<div class="media-slide">
			<?php foreach ($banners as $banner) { ?>
				<div class="thumb"><a
					href="<?php echo $banner['link']; ?>"
					rel="media"> <img
					src="<?php echo $banner['image']; ?>"
					class='multi-media-image' width='48' height='48' /></a>
				<div class="media-description">
				
				<p><?php echo $banner['title']; ?></p>
				<span class="media-arrow"></span></div>
				</div>			
			<?php } ?>
			<!-- end .media-slide --></div>
		<!-- end #media-slides --></div>
	<!-- end #multi --></div>
<!-- end #multi-bar --></div>
<script type="text/javascript"><!--

$(document).ready(function() {
	$multi-bar = jQuery('#multi #media-slides');
	if ( $multi-bar.length ) {
		$multi-bar.cycle({
			fx: 'fade',
			timeout: 0,
			speed: 500,
			cleartypeNoBg: true,
			prev:   'a#left-multi',
			next:   'a#left-multi'
		});
	}

	$multi-bar.find('.thumb a').hover(function(){
		jQuery(this).find('img').stop(true,true).fadeTo(400,0.7).end().find('span').fadeTo(400,1);
		jQuery(this).parent('.thumb').find('.media-description').stop(true,true).css({'display':'block','opacity':0}).animate({opacity:1, bottom:'53px'},400);
	},function(){
		jQuery(this).find('img').stop(true,true).fadeTo(400,1).end().find('span').fadeTo(400,0);
		jQuery(this).parent('.thumb').find('.media-description').stop(true,true).animate({opacity:0, bottom:'63px'},400);
	});
});
--></script>